<template>
  <a-drawer :title="$t('other.scheduleDetails')" placement="right" :visible="visible" @close="closeDraw" class="base-color-details" width="440" >
<!--    <div class='blue-line'>排产明细</div>-->
    <template #extra>
      <a-space class="mr-22">
        <redo-outlined @click="refashList"/>
      </a-space>
<!--      <a-button type="primary" class="mr_10" @click="onClose"><redo-outlined /></a-button>-->
    </template>

    <a-spin :spinning="loading">
      <div :class="['make-list-schedule-detail-draw', { 'isLocal':true}]"  @scroll="scrollBottom">
        <a-row v-for="(item, index) in dataList" :key="index" :class="['list-card', {'active-card' : item.status == 2?true:false}]" >
          <a-col :span="12" class="mb-15"><b>【{{item.scheduleBillNo}}】</b></a-col>
          <a-col :span="12" class="text-right mb-15">
              <!--<span v-if="props.sideType == 'online'" class="text-primary" @click="schDetail(item)">{{$t('common.look')}}详情<RightOutlined /></span>-->
            <a-tag :color="'processing'" class="mr-0" v-if="item.status == 2"> {{ $t('other.inProduct') }}</a-tag>
            <a-tag :color="'warning'" class="mr-0" v-if="item.status == 1"> {{ $t('other.toProduced') }}</a-tag>
            <a-tag :color="'success'" class="mr-0" v-if="item.status == 4"> {{$t('sysManage.completed')}}</a-tag>
          </a-col>
          <a-col :span="14" class="mb-15"> {{$t('basicData.color') }}：{{item.color}} </a-col>
          <a-col :span="10" class="mb-15"> {{ $t('other.taskNo') }}：{{item.produceQty}} </a-col>
          <a-col :span="14" class="mb-15"> {{ $t('basicData.size') }}：{{item.size}} </a-col>
          <a-col :span="10" class="mb-15"> {{ $t('hangManage.completeNumber') }}：{{item.finishedQty}} </a-col>
          <a-col :span="14" class="mb-15"> {{ $t('hangManage.poNo') }}：{{item.poNo}} </a-col>
          <a-col :span="10" class="mb-15"> {{ $t('hangManage.completeIngNumber') }}：{{item.unfinishedQty}} </a-col>
        </a-row>
        <a-empty v-if="!dataList.length" class="mt-50" />
      </div>
    </a-spin>

    <div class="footer mt-30">
      <a-button @click="closeDraw">{{$t('common.cancel')}}</a-button>
    </div>
  </a-drawer>
</template>
 
<script setup name="makeListManageDetails">
import { ref } from 'vue'
import { RedoOutlined } from '@ant-design/icons-vue'
import axios from '@/utils/request'
import {isEmpty} from "lodash";
import {message} from "ant-design-vue";

// let detailInfo = ref({})
let visible = ref(false)

let loading = ref(false)
let dataList = ref([])
let recordObj = ref({})
const refashList = () => {
  if (!isEmpty(recordObj.value.id)){
    openDraw(recordObj.value)
  }else{
    message.warn('缺少表参数，请重试！')
  }
}
const openDraw = async (record) => {
  // console.log(record)
  recordObj.value = record
  loading.value = true
  try {
    let moId = record.id
    // let moId = "1579006975303450625"
    let res = await axios.getAction('/api/hanger/schedule-bill/get-schedule-bill-by-moId', {"moId":moId})
    // console.log(res)
    if (res.success){
      dataList.value = res.data || []
      loading.value = false
      visible.value = true
    }
    loading.value = false
  }catch (err){
    loading.value = false
    // console.log(err)
  }
}
const closeDraw = () => {
  visible.value = false
  recordObj.value = {}
}
defineExpose({
  openDraw
})
</script>